<template>
	<div class="common stock-check">
		<div class="common-top clearfix">
			<div class="left flex flex-align-center" style="height:100%;">
				<span class="tips">吧台盘点</span>
				<div class="change-stock-btn mode">
					<span>商品</span>
					<span :class="modeType=='PRODUCT'?'change-btn':'change-btn right-btn'" @click.stop="changeModeType">
						<i @click.stop=""></i>
					</span>
					<span>原料</span>
				</div>
			</div>
			<div class="right flex flex-align-center" style="height:100%;margin-right:20px;">
				<div class="search-btn" @click="$router.push('/Bar_Check/record')">
					<span>吧台盘点记录</span>
				</div>
			</div>
		</div>
		<div class="content-box">
			<div class="content scroll-style" v-if="modeType=='PRODUCT'">
				<div class="titleTable">
					<table>
	                    <tr>
	                        <th style="width:8%">序号</th>
	                        <th style="width:10.5%">商品名称</th>
	                        <th style="width:10.5%">商品分类</th>
	                        <!-- <th style="width:10.5%">规格(个/件)</th> -->
	                        <!-- <th style="width:10.5%">应有件数(件)</th> -->
	                        <!-- <th style="width:10.5%">实际件数(件)</th> -->
	                        <th style="width:10.5%">吧台数量(个)</th>
	                        <th style="width:10.5%">实际数量(个)</th>
	                        <!-- <th style="width:10.5%">盈亏件数(件)</th> -->
	                        <th style="width:10.5%">盈亏个数(个)</th>
	                        <th style="width:8%">备注</th>
	                    </tr>
	                </table>
				</div>
                <div class="scrollBox">
                    <div class="scroll" :style="{'height':homeArr.length*10+'%'}">
                        <table class="conTable">
                            <tr v-for="(item,ind) in homeArr">
                                <td style="width:8%" v-text="ind+1"></td>
                                <td style="width:10.5%" v-text="item.name" :title="item.name"></td>
                                <td style="width:10.5%" v-text="item.typeName" :title="item.typeName"></td>
                                <!-- <td style="width:10.5%" >
                                	<span v-if="item.isStock" class="table-input">
                                										<input type="text" maxlength="4" v-model="item.stockQuantityRatio" @keyup.enter="modify(item,ind,'stock')" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                                										<span @click="modify(item,ind,'stock')" class="sure-btn">确定</span>
                                									</span>
                                									<span v-else><span v-text="item.stockQuantityRatio"></span><i class="iconfont icon-bianji" @click="homeArr[ind].isStock=true"></i></span>
                                </td> -->
                               
                                <td style="width:10.5%" v-text="item.quantity"></td>
                                <td style="width:10.5%">
                                	<span class="table-input">
										<!-- <img src="../../../assets/check_reduce.png" height="18" width="18" alt=""> -->
										<input type="text" maxlength="4" v-model="item.real_quantity" onfocus="this.select()">
										<!-- <img src="../../../assets/check_add.png" height="18" width="18" alt=""> -->
									</span>
                                </td>
                                <!-- <td style="width:10.5%" v-text="item.real_warehouse-item.warehouse"></td> -->
                                <td style="width:10.5%" v-text="item.real_quantity-item.quantity"></td>
                                <td style="width:8%">
									<span style="color: #618bfb;font-size:16px;cursor:pointer;" @click="productNotes= {btn:true,productId:item.id,notes:item.notes,ind:ind,productName:item.productName}" v-text="item.notes?item.notes:'添加'"></span>
									<span class="change-notes" @click="productNotes= {btn:true,productId:item.id,notes:item.notes,ind:ind,productName:item.productName}" v-if="item.notes">修改备注</span>
								</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="content-footer clearfix">
				    <div class="right flex flex-align-center" style="height:100%;">
				    	<!-- <div class="footer-btn black-bg" @click="print">
				    		小票打印
				    	</div> -->
				    	<div class="footer-btn black-bg" @click="excel">
				    		导出数据
				    	</div>
				    	<div class="footer-btn sure"@click="willGoCheck">
				    		盘点
				    	</div>
				    </div>
                </div>
			</div>
			<div class="content scroll-style" v-if="modeType=='MATERIAL'">
				<div class="titleTable">
					<table>
	                    <tr>
	                        <th style="width:8%">序号</th>
	                        <th style="width:10.5%">原料名称</th>
	                        <!-- <th style="width:10.5%">规格(个/件)</th> -->
	                        <!-- <th style="width:10.5%">应有件数(件)</th> -->
	                        <!-- <th style="width:10.5%">实际件数(件)</th> -->
	                        <th style="width:10.5%">吧台数量</th>
	                        <th style="width:10.5%">实际数量</th>
	                        <!-- <th style="width:10.5%">盈亏件数(件)</th> -->
	                        <th style="width:10.5%">盈亏数</th>
	                        <th style="width:8%">备注</th>
	                    </tr>
	                </table>
				</div>
                <div class="scrollBox">
                    <div class="scroll" :style="{'height':homeArr.length*10+'%'}">
                        <table class="conTable">
                            <tr v-for="(item,ind) in homeArr">
                                <td style="width:8%" v-text="ind+1"></td>
                                <td style="width:10.5%" v-text="item.name" :title="item.name"></td>
                               
                                <td style="width:10.5%" v-text="item.quantity"></td>
                                <td style="width:10.5%">
                                	<span class="table-input">
										<!-- <img src="../../../assets/check_reduce.png" height="18" width="18" alt=""> -->
										<input type="text" maxlength="4" v-model="item.real_quantity" onfocus="this.select()">
										<!-- <img src="../../../assets/check_add.png" height="18" width="18" alt=""> -->
									</span>
                                </td>
                                <!-- <td style="width:10.5%" v-text="item.real_warehouse-item.warehouse"></td> -->
                                <td style="width:10.5%" v-text="item.real_quantity-item.quantity"></td>
                                <td style="width:8%">
									<span style="color: #618bfb;font-size:16px;cursor:pointer;" @click="productNotes= {btn:true,productId:item.id,notes:item.notes,ind:ind,productName:item.productName}" v-text="item.notes?item.notes:'添加'"></span>
									<span class="change-notes" @click="productNotes= {btn:true,productId:item.id,notes:item.notes,ind:ind,productName:item.productName}" v-if="item.notes">修改备注</span>
								</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="content-footer clearfix">
				    <div class="right flex flex-align-center" style="height:100%;">
				    	<!-- <div class="footer-btn black-bg" @click="print">
				    		小票打印
				    	</div> -->
				    	<div class="footer-btn black-bg" @click="excelM">
				    		导出数据
				    	</div>
				    	<div class="footer-btn sure"@click="willGoCheck">
				    		盘点
				    	</div>
				    </div>
                </div>
			</div>
		</div>

		<!-- 单品备注 -->
		<div class="dialog-box" v-if="productNotes.btn" @click="productNotes.btn=false">
			<div class="dialog position-middle-center" @click.stop="">
				<span class="close-btn" @click="productNotes.btn=false"><i class="iconfont icon-close-b"></i></span>
				<div class="dialog-title">备注</div>
				<div class="dialog-content" style="margin-top:20px;">
					<div class="dialog-content-item-center">
						<span>请仔细核对</span>
					</div>
					<div class="dialog-content-item clearfix select-box">
						<span>备注</span>
						<el-input
						 	class="input-box"
						    placeholder="如有需求，请填写备注"
						    v-model="productNotes.notes">
						  </el-input>
					</div>
				</div>
				<div class="dialog-footer">
					<div class="footer-btn cancle" @click="productNotes.btn=false">取消</div>
					<div class="footer-btn sure" @click="notesFn">确定</div>
				</div>
			</div>
		</div>
		<div class="dialog-box" v-if="dialogBtn1" @click="dialogBtn1=false">
			<div class="dialog position-middle-center" @click.stop="" style="width:720px;">
				<span class="close-btn" @click="dialogBtn1=false"><i class="iconfont icon-close-b"></i></span>
				<div class="dialog-title">盘点</div>
				<div class="dialog-content" style="margin-top:20px;height:400px;">
					<div class="dialog-content-title">
						<table style="width:100%;">
							<tr>
								<th style="width:10%">序号</th>
		                        <th style="width:24%">名称</th>
		                        <!-- <th style="width:16%">系统件数(件)</th> -->
		                        <!-- <th style="width:18%">实际件数(件)</th> -->
		                        <th style="width:16%">系统个数(个)</th>
		                        <th style="width:18%">实际个数(个)</th>
		                        <th style="width:25%">备注</th>
							</tr>
						</table>
					</div>
					<div class="dialog-scroll">
						<div class="scroll-inner">
							<table style="width:100%;text-align:center;">
								<tr v-for="(item,ind) in willCheckBody.checkBar" v-if="item.isKind">
	                                <td style="width:10%" v-text="ind+1"></td>
	                                <td style="width:24%" v-text="item.productName"></td>
	                                <!-- <td style="width:16%" v-text="item.accurateWholeQty"></td> -->
	                                <!-- <td style="width:18%" v-text="item.checkWholeQty"></td> -->
	                                <td style="width:18%" v-text="item.accurateNum"></td>
	                                <td style="width:18%" v-text="item.checkNum"></td>
	                                <td style="width:25%" v-text="item.notes"></td>
	                            </tr>
							</table>
						</div>
					</div>
				</div>
				<div class="dialog-footer clearfix">
					<!-- <div class="footer-btn cancle" @click="dialogBtn=false">取消</div> -->
					<div class="footer-btn sure right" @click="dialogBtn=true">提交数据</div>
				</div>
			</div>
		</div>
		<div class="dialog-box" v-if="dialogBtn" @click="dialogBtn=false">
			<div class="dialog position-middle-center" @click.stop="">
				<span class="close-btn" @click="dialogBtn=false"><i class="iconfont icon-close-b"></i></span>
				<div class="dialog-title">盘点确认</div>
				<div class="dialog-content" style="margin-top:20px;">
					<div class="dialog-content-item-center">
						<span>盈亏种类 <span class="big-num" v-text="billData.kind"></span> 种</span>
					</div>
					<div class="dialog-content-item-center">
						<span>请仔细核对</span>
					</div>
					<div class="dialog-content-item clearfix select-box">
						<span>备注</span>
						<el-input
						 	class="input-box"
						    placeholder="如有需求，请填写备注"
						    v-model="billData.notes">
						  </el-input>
					</div>
				</div>
				<div class="dialog-footer">
					<div class="footer-btn cancle" @click="dialogBtn=false">取消</div>
					<div class="footer-btn sure" @click="stockCheck">确定</div>
				</div>
			</div>
		</div>

		<div style="display:block;">
			<div id="print">
				<h1 style="text-align:center;font-size:18px;">欢迎使用火星捕手</h1>
				<p style="text-align:center;font-size:16px;">吧台盘点小票</p>
		    	<div>
		    		<span>店铺名:</span>
		    		<span v-text="store.storeName"></span>
		    	</div>
		    	<div>
		    		<span>操作员:</span>
		    		<span v-text="store.employeeName"></span>
		    	</div>
				<div>
		    		<span>打印时间:</span>
		    		<span>{{new Date() | numberToAllDate('')}}</span>
		    	</div>
		    	<div style="margin-top:10px;border:1px solid #444">
		    		<table style="width:100%;border-collapse: collapse;table-layout:fixed;font-size:12px;">
		    			<tr>
		    				<td style="width:50%;">名称</td>
		    				<td style="width:22%;text-align:center;">个数</td>
		    				<td style="width:22%;text-align:center;"></td>
		    			</tr>
	    				<tr v-for="(item,idx) in homeArr">
	    					<td style="width:50%;overflow:hidden;white-space:nowrap;text-align:left" v-text="item.productName"></td>
	    					<td style="width:22%;text-align:center;" v-text="item.counterQuantity"></td>
	    					<td style="width:22%;text-align:center;"></td>
	    				</tr>
		    		</table>
		    	</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  	props:['storeId','store'],
  	data(){
		return {
			modeType:"PRODUCT",
            billData:{
	        	kind:0,
	        	notes:'',
	        },
	        dialogBtn:false,
	        dialogBtn1:false,
	        productNotes:{
	        	btn:false,
	        	ind:0,
	        	notes:'',
	        	productName:'',
	        	productId:''
	        },
	        homeArr:[],//首页商品列表
	        willCheckBody:{},//将要判断的  body
	        preventBtn:true
		}
	},
	watch:{
	},
	methods:{
		changeModeType(){
			this.homeArr = [];
			this.modeType == "PRODUCT"?this.modeType="MATERIAL":this.modeType="PRODUCT";
			this.getHomeData();
		},
		//小票
	    print(){
	    	this.$posPrint(1, document.getElementById("print").innerHTML);
	    },
		notesFn(){
			let localNotes = JSON.parse(sessionStorage.getItem('localNotes'))?JSON.parse(sessionStorage.getItem('localNotes')):[];
			let isNew = true;//是否直接
			let obj={
				notes:'',
				productId:'',
				productName:''
			}
			if(localNotes.length){
				for (var i = 0; i < localNotes.length; i++) {
					if(localNotes[i].productId==this.productNotes.productId){
						obj = {
							notes:this.productNotes.notes,
							productId:this.productNotes.productId,
							productName:this.productNotes.productName
						}
						localNotes[i]=obj;
						isNew = false;
						sessionStorage.setItem('localNotes', JSON.stringify(localNotes));
						this.productNotes.btn = false;
					}
				}
			}
			if(isNew){
				obj = {
					notes:this.productNotes.notes,
					productId:this.productNotes.productId,
					productName:this.productNotes.productName
				};
				localNotes.push(obj);
				sessionStorage.setItem('localNotes', JSON.stringify(localNotes));
				this.productNotes.btn = false;
			}
			this.homeArr[this.productNotes.ind].notes = this.productNotes.notes;
		},
		// 点击盘点
		willGoCheck(){
			this.billData={notes:'',kind:0}
			// let body = {
	    	// 	id:this.$uuid(),
	    	// 	storeId:this.storeId,
	    	// 	notes:'',
	    	// 	singleProfit:0,//盘盈总个数量
	    	// 	wholeProfit:0,//盘盈总件数量
	    	// 	singleLosses:0,//盘亏总个数量
	    	// 	wholeLosses:0,//盘亏总件数量
	    	// 	source:'COUNTER',
	    	// 	products:[]
			// };
			let store = JSON.parse(sessionStorage.getItem('store'));
			let body = {
	    		operatorId:store.employeeId,//操作人ID
				operatorName:store.employeeName,//操作人名字
				checkCode:this.$uuid(),//
	    		storeId:this.storeId,//
				kind:this.billData.kind,//
				notes:'',
				countNum:0,//盘点总数量
	    		checkBar:[]//
			};
			console.log(this.homeArr)
			for (let i = 0; i < this.homeArr.length; i++) {
				if ( !/^\d+$/.test(this.homeArr[i].real_quantity) ) {
					this.$message({
						showClose: true,
			            message: '请输入正确的  '+this.homeArr[i].name+'  商品个数',
			            type: 'error'
			        })
			        return;
				}
	    		let newProducts = {
	    			productId:this.homeArr[i].id,
	    			isKind:false,
	    			productName:this.homeArr[i].name,
	    			// stockPrice:this.homeArr[i].stockPrice*100,
	    			accurateNum:this.homeArr[i].quantity,
	    			checkNum:parseInt(this.homeArr[i].real_quantity),//实际总个数量
	    			// checkWholeQty:parseInt(this.homeArr[i].real_COUNTER),//实际总件数量
	    			// accurateSingleQty:this.homeArr[i].counterQuantity,//应有个数
	    			// accurateWholeQty:this.homeArr[i].warehouse/this.homeArr[i].stockQuantityRatio,//应有件数
	    			notes:this.homeArr[i].notes
	    		};

	    		// if(this.homeArr[i].real_counterQuantity>=this.homeArr[i].counterQuantity){
	    		// 	//实际比应有多=>盘盈总个数量
	    		// 	body.singleProfit += (this.homeArr[i].real_counterQuantity-this.homeArr[i].counterQuantity);
	    		// }else {
	    		// 	//实际比应有少=>盘亏总个数量
	    		// 	body.singleLosses += (this.homeArr[i].counterQuantity-this.homeArr[i].real_counterQuantity);
	    		// };
	    		// if(this.homeArr[i].real_warehouse>=this.homeArr[i].warehouse){
	    		// 	//实际比应有多=>盘盈总件数量
	    		// 	body.wholeProfit += (this.homeArr[i].real_warehouse-this.homeArr[i].warehouse);
	    		// }else {
	    		// 	//实际比应有少=>盘亏总件数量
	    		// 	body.wholeLosses += (this.homeArr[i].warehouse-this.homeArr[i].real_warehouse);
	    		// };
	    		if(this.homeArr[i].real_quantity!=this.homeArr[i].quantity){
	    			this.billData.kind+=1;
	    			newProducts.isKind = true;
	    		}
	    		if(newProducts.isKind){
	    			// body.products.unshift(newProducts);
	    			body.checkBar.unshift(newProducts);
	    		}else{
	    			body.checkBar.push(newProducts);
	    			// body.products.push(newProducts);
	    		}
	    	}
			body.kind=this.billData.kind;//种类
	    	body.mold=this.modeType;//种类
			for(let i=0;i<body.checkBar.length;i++){
				body.countNum += body.checkBar[i].checkNum;
			}
	    	this.willCheckBody = body;
	    	if(this.billData.kind==0){
	    		this.dialogBtn = true;
	    	}else{
	    		this.dialogBtn1=true;
	    	}
		},
		//发送盘点数据
		stockCheck(){
			if ( !this.preventBtn ) {
                return;
            }
            this.preventBtn = false;
			this.willCheckBody.notes = this.billData.notes;
			this.$http.post('checkBar-product',this.willCheckBody).then((res)=>{
				if(res.data.code === 400){
					this.$message({
						showClose: true,
						message: res.data.msg,
						type: 'error'
					});
					this.preventBtn = true;
					return;
				}
	    		this.$message({
	    			showClose: true,
		            message: '操作成功',
		            type: 'success'
		        })
	    		this.dialogBtn = false;
	    		this.dialogBtn1 = false;
	    		sessionStorage.removeItem('localNotes');
	    		this.getHomeData();
	    		setTimeout(()=>{
	    			this.preventBtn = true;
	    		},1000)
	    	}).catch((err)=>{
				setTimeout(()=>{
	    			this.preventBtn = true;
	    		},1000)
	    	})
		},
	    //获取首页数据
	    getHomeData(){
	    	this.homeArr = [];
	    	this.$http.get('/getList-barProduct?id='+this.storeId+"&mold="+this.modeType).then((res)=>{
	    		let data = res.data;
	    		for (var i = 0; i < data.length; i++) {
	    			// let obj = {
	    			// 	// real_warehouse:parseInt(data[i].warehouse/data[i].stockQuantityRatio),//实际仓库库存
	    			// 	real_counterQuantity:data[i].counterQuantity,//实际吧台数量
	    			// 	isStock:false,//规格是否处于修改状态
	    			// 	notes:'',
	    			// 	id:data[i].productId,
	    			// 	productName:data[i].productName,
	    			// 	stockQuantityRatio:data[i].stockQuantityRatio,
	    			// 	counterQuantity:data[i].counterQuantity,//吧台数量
	    			// 	// warehouse:parseInt(data[i].warehouse/data[i].stockQuantityRatio)//仓库库存
					// };
					let obj = {
						id:data[i].id,
						name:data[i].name,
						typeName:data[i].typeName,
						quantity:data[i].quantity,
						real_quantity:data[i].quantity,
	    			};
					if(this.modeType == "MATERIAL"){
						obj.quantity = data[i].stockQty;
						obj.real_quantity = data[i].stockQty;
					}
	    			//获取本地的备注信息
	    			let localNote = JSON.parse(sessionStorage.getItem('localNotes'))?JSON.parse(sessionStorage.getItem('localNotes')):[];
					if(localNote.length){
						for (var j = 0; j < localNote.length; j++) {
							if(obj.id==localNote[j].productId){
								obj.notes = localNote[j].notes;
							}
						}
					}
	    			this.homeArr.push(obj);
	    		}
	    	})
	    },
	    //修改规格
	    modify(item,ind){
    		this.$http.post('/modify-format',{productId:item.id,stockQuantityRatio:item.stockQuantityRatio}).then((res)=>{
    			this.homeArr[ind].isStock = false;
    			this.$message({
    				showClose: true,
		            message: '修改成功',
		            type: 'success'
		        })
    		})
	    },
	    //数据导出
		excelM(){
	    	let data = this.homeArr;
            let html =  '<tr  style="font-size:18px;font-weight:900;text-align:center">'+  
                            '<td>原料名称</td>'+
                            '<td>吧台散装数</td>'+
                            '<td>实际散装数</td>'+
                        '</tr>'
            for(var i=0;i<data.length;i++){
                html  +='<tr  style="font-size:14px;text-align:center">'+
                            '<td>'+data[i].name+'</td>'+ 
                            '<td>'+data[i].quantity+'</td>'+ 
                            '<td>'+data[i].quantity+'</td>'+
                        '</tr>'
            }
            let table = document.createElement('table');
            document.body.appendChild(table)
            table.style.display='none';
            // table.style.borderCollapse='collapse';
        	table.innerHTML = html;
            window.method5(table);
	    },
	    excel(){
	    	let data = this.homeArr;
            let html =  '<tr  style="font-size:18px;font-weight:900;text-align:center">'+  
                            '<td>商品名称</td>'+
                            '<td>吧台散装(个)</td>'+
                            '<td>实际散装(个)</td>'+
                        '</tr>'
            for(var i=0;i<data.length;i++){
                html  +='<tr  style="font-size:14px;text-align:center">'+
                            '<td>'+data[i].name+'</td>'+ 
                            '<td>'+data[i].quantity+'</td>'+ 
                            '<td>'+data[i].quantity+'</td>'+
                        '</tr>'
            }
            let table = document.createElement('table');
            document.body.appendChild(table)
            table.style.display='none';
            // table.style.borderCollapse='collapse';
        	table.innerHTML = html;
            window.method5(table);
	    }
	},
	created () {
		this.getHomeData();
	},
	mounted() {
	},
	beforeDestroy() {
		sessionStorage.removeItem('localNotes');
	}
}
</script>
<style lang="scss" scoped>
	@import '../../../../static/css/common.scss';
	@import "check";
</style>